<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>面板折叠插件</title>
    <link href="Css/jquery-ui.css" rel="stylesheet" type="text/css" />
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
</head>

<body>
<h2><pre>
     面板折叠插件可以实现页面中指定区域类似“手风琴”的折叠效果，即点击标题时展开内容，再点另一标题时，关闭已展开的内容，
    调用格式如下：$(selector).accordion({options});
    其中，参数selector为整个面板元素，options参数为方法对应的配置对象。
</pre></h2>
<div id="divtest">
    <div id="accordion">
        <h3>
            <a href="#">白富美</a></h3>
        <p>咱们结婚吧!</p>
        <h3>
            <a href="#">土豪族</a></h3>
        <p>咱们交个朋友吧!</p>
    </div>
</div>

<script type="text/javascript">
    $(function () {
        $("#accordion").accordion()
    });
</script>
</body>
</html>